import React, { useState } from "react";
import {
  Box,
  List,
  ListItemButton,
  ListItemText,
  Divider,
  Collapse,
  ListItemIcon,
} from "@mui/material"; // 导入 Material-UI 组件
import ExpandLess from "@mui/icons-material/ExpandLess"; // 导入展开图标
import ExpandMore from "@mui/icons-material/ExpandMore"; // 导入收起图标
import { CHINESE_SHOW_MODEL, generateMenuData } from "./Common"; // 导入辅助函数和常量，确保路径正确

/**
 * 法律条例展示页面的侧边栏组件
 * @param {function} handleAdvancedSearch - 处理高级搜索的函数
 * @param {Array} lawsInfo - 法律信息数组
 * @returns {JSX.Element} 返回侧边栏的 JSX 元素
 */
export default function SideBarLegislation({
  handleAdvancedSearch, // 处理高级搜索的函数
  lawsInfo, // 法律信息数组
}) {
  // 动态生成侧边栏数据
  const menuData = generateMenuData(lawsInfo);

  // 使用一个对象来控制每个菜单项的展开状态
  const [openItems, setOpenItems] = useState(
    // 默认展开前三个菜单项
    Array(menuData.length)
      .fill(false)
      .map((_, index) => index < 3)
  );

  // 切换单个菜单项的展开和收起
  const handleListItemClick = (groupIndex) => {
    setOpenItems({
      ...openItems,
      [groupIndex]: !openItems[groupIndex],
    });
  };

  return (
    <Box>
      <List>
        {menuData.map((group, groupIndex) => (
          <Box key={groupIndex}>
            <ListItemButton
              onClick={() => handleListItemClick(groupIndex)}
              sx={{ pl: 1, py:0 }} // 左侧填充
            >
              {/* 显示菜单项标题 */}
              <ListItemIcon>
                <group.icon />
              </ListItemIcon>
              <ListItemText
                primary={CHINESE_SHOW_MODEL[group.title]} // 使用常量来显示中文标题
                primaryTypographyProps={{
                  fontWeight: "bold", // 字体加粗
                }}
              />
              {/* 显示展开或收起图标 */}
              {openItems[groupIndex] ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Divider /> {/* 分隔线 */}
            {/* 使用Collapse组件来控制子菜单的展开和收起 */}
            <Collapse
              in={openItems[groupIndex]} // 使用openItems[groupIndex]来控制展开状态
              timeout="auto"
              unmountOnExit
            >
              {group.items.map((item, itemIndex) => (
                <ListItemButton
                  key={itemIndex}
                  onClick={() => handleAdvancedSearch(group.title, item.label)}
                  sx={{
                    pl: 8,
                    py: 0,
                    mb: 0.5, // 减少按钮之间的距离
                    height: "40px", // 设置按钮的高度
                    minHeight: "40px", // 设置按钮的最小高度
                    borderRadius: "4px", // 可选：添加圆角
                    "&:hover": {
                      backgroundColor: "rgba(0, 0, 0, 0.03)", // 可选：鼠标悬停时的背景颜色
                    },
                  }}
                >
                  {/* 显示子菜单项 */}
                  <ListItemText
                    primary={item.label}
                    secondary={`(${item.count})`} // 显示计数
                    primaryTypographyProps={{
                      sx: {
                        fontSize: "0.9rem", // 调整 primary 字体大小
                      },
                    }}
                    secondaryTypographyProps={{
                      sx: {
                        fontSize: "0.9rem", // 调整 secondary 字体大小
                      },
                    }}
                    sx={{
                      display: "flex",
                      justifyContent: "space-between", // 两端对齐
                      alignItems: "center", // 垂直居中
                      "&:hover": {
                        color: (theme) => theme.palette.hover.secondary,
                      },
                    }}
                  />
                </ListItemButton>
              ))}
            </Collapse>
          </Box>
        ))}
      </List>
    </Box>
  );
}
